"use client";
import { useCallback, useEffect, useRef } from "react";

import { useRouter } from "next/navigation";
import type { MouseEventHandler } from "react";

export default function Modal({ children }: { children: React.ReactNode }) {
	const overlay = useRef(null);
	const wrapper = useRef(null);
	const router = useRouter();

	const onDismiss = useCallback(() => {
		router.back();
	}, [router]);

	const onClick: MouseEventHandler = useCallback(
		(e) => {
			if (onDismiss && (e.target === overlay.current || e.target === wrapper.current)) {
				onDismiss();
			}
		},
		[onDismiss, overlay, wrapper]
	);

	const onKeyDown = useCallback(
		(e: KeyboardEvent) => {
			if (e.key === "Escape") onDismiss();
		},
		[onDismiss]
	);

	useEffect(() => {
		document.addEventListener("keydown", onKeyDown);
		return () => document.removeEventListener("keydown", onKeyDown);
	}, [onKeyDown]);

	return (
		<div
			ref={overlay}
			className="fixed z-10 left-0 right-0 top-0 bottom-0 mx-auto bg-black/80"
			onClick={onClick}
		>
			<div
				ref={wrapper}
				className="absolute top-32 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full sm:w-10/12 md:w-8/12 lg:w-1/2 p-6"
			>
				{children}
			</div>
		</div>
	);
}
